@use '../../../../../../styles/typography';

:host {
  width: 200px;
  display: block;
  overflow-x: auto;

  mat-tree {
    margin-left: 0.625rem;

    mat-tree-node {
      min-height: 20px !important;
    }
  }

  .expandable-node,
  .name,
  .value {
    @extend %monospaced;
    white-space: nowrap;
  }

  .expandable-node,
  .non-expandable-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .expandable-node {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;

    mat-icon {
      position: absolute;
      left: -0.75rem;
      width: 12px;
      height: 12px;
      font-size: 12px;
    }
  }

  .non-expandable-node {
    margin: 0;
  }

  .name {
    color: var(--color-tree-node-element-name);

    &::after {
      content: ':';
      color: var(--color-text);
    }
  }
}
